<template>
    <div id='supplier_list'>
      <div class="search-box">
        <Row type="flex">
          <Row type="flex" justify="start" class="search-item-left">
            <Col class="search-item"><span class="search-label">供应商信息：</span><Input placeholder="名称/缩写" v-model='searchName'></Input></Col>
            <Col class="search-item">
              <span class="search-label">是否显示：</span>
              <Select v-model="pageObj.isShow" @on-change="search" style="width:180px">
                <Option v-for="item in isShowList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col class="search-item"><span class="search-label">采购员：</span><Input placeholder="请输入" v-model='buyer'></Input></Col>
            <Col class="search-item">
              <Button class="search-btn" type='primary' @click="doSearch">查询</Button>
            </Col>
            <Col class="search-item">
              <Button class="search-btn" @click="reset">重置</Button>
            </Col>
          </Row>
          <Row type="flex" justify="end" class="search-item-right">
            <Col class="search-item"><Button type="primary" style="margin-right:8px;width: 90px;" @click="skipAdd" v-if="hasPermission('moms:scs:suppliercreate')">添加供应商</Button></Col>
          </Row>
        </Row>
      </div>
      <Table stripe class="table-list" :columns="columns" :data="tableData" :loading="loading" :height="tableHeight">
        <template slot-scope="{ row }" slot="displayFlag">
          <span>{{row.displayFlag === 1 ? '显示': row.displayFlag === 0 ? '隐藏': ''}}</span>
        </template>
        <template slot-scope="{ row }" slot="buyer">
          <span>{{row.buyer ? row.buyer.split(';')[0] : ''}}</span>
        </template>
        <template slot-scope="{ row }" slot="action">
          <i class="iconsys icondetail" title="查看" @click='skipDetail(row)'></i>
          <i class="iconsys iconedit" title="编辑" @click='skipEdit(row)'></i>
        </template>
      </Table>
      <Row type='flex' justify="end" style='padding: 20px'>
        <Col>
          <Page :total="pageObj.total"
                :page-size='pageObj.pageSize'
                :current='pageObj.pageIndex'
                :page-size-opts= '[10, 20, 50, 100]'
                show-total
                show-sizer
                @on-change='changePageIndex'
                @on-page-size-change='changePageSize' />
        </Col>
      </Row>
    </div>
  </template>

<script>
import { mapState } from 'vuex'
import { supplierList, getOrgTag } from '@/api/purchase/index'
export default {
  name: 'supplier_list',
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      orgGuid: state => state.user.orgId
    }),
    tableHeight () {
      let height = this.tableData.length > 10 ? 520 : 0
      return height
    }
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'supplier_list') {
        this.getData()
      }
    }
  },
  data () {
    return {
      loading: false,
      searchName: '',
      buyer: '',
      pageObj: {
        buyer: '',
        searchName: '',
        isShow: 2,
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
      isShowList: [
        { value: 2, label: '全部' },
        { value: 1, label: '显示' },
        { value: 0, label: '隐藏' }
      ],
      orgTagId: [],
      tableData: [],
      columns: [
        {
          title: '供应商缩写',
          key: 'suppNameShorten'
        },
        {
          title: '供应商名称',
          key: 'suppName'
        },
        {
          title: '所属组织',
          key: 'orgTagName'
        },
        {
          title: '所属采购员',
          slot: 'buyer'
        },
        {
          title: '是否显示',
          slot: 'displayFlag'
        }
      ]
    }
  },
  methods: {
    // 获取组织标签
    getOrgTags () {
      getOrgTag({
        merchantId: this.merchantId,
        id: this.orgGuid
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          if (result.data.length > 0) {
            this.orgTagId = result.data.map(item => item.id)
            this.getData()
          }
        } else {
          this.$Message.error(result.error || result.message)
        }
      })
    },
    reset () {
      this.buyer = ''
      this.searchName = ''
      this.pageObj.searchName = ''
      this.pageObj.buyer = ''
      this.pageObj.isShow = 2
      this.pageObj.pageIndex = 1
      this.pageObj.pageSize = 20
      this.getData()
    },
    search () {
      this.pageObj.pageIndex = 1
      this.getData()
    },
    doSearch () {
      this.pageObj.buyer = this.buyer
      this.pageObj.searchName = this.searchName
      this.pageObj.pageIndex = 1
      this.getData()
    },
    skipAdd () {
      this.$router.push({ name: 'supplier_add' })
    },
    skipDetail (row) {
      this.$router.push({ name: 'supplier_detail', params: { id: row.supplierId } })
    },
    skipEdit (row) {
      this.$router.push({ name: 'supplier_edit', params: { id: row.supplierId } })
    },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      this.getData()
    },
    getData () {
      this.loading = true
      supplierList({
        merchantId: this.$store.state.user.merchantId,
        dispFlag: this.pageObj.isShow,
        keyword: this.pageObj.searchName,
        buyer: this.pageObj.buyer,
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize,
        displayOrder: 1,
        supplierTypeCode: '1',
        orgTagId: this.orgTagId
      }).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data.records || []
          this.pageObj.total = result.data.total
        } else {
          this.$Message.error(result.error || result.message)
        }
      })
    }
  },
  mounted () {
    this.getOrgTags()
    if (this.hasPermission(['moms:scs:supplierdetail', 'moms:scs:supplierupdate'])) {
      this.columns.push({
        title: '操作',
        slot: 'action',
        width: 200
      })
    }
  }
}
</script>
